<template>
  <div>
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="1" width="150" class="left">放款时间</td>
          <td width="150" class="title">放款时间</td>
          <!-- <td>放款时间</td>
           -->
          <td colspan="11">{{ tbLoanSituation.loanTime }}</td>
        </tr>
      </table>
    </div>
    <!-- 1 -->
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="99999" width="150" class="left">银行还款</td>
          <td width="150" class="title">银行还款开户行</td>
          <td colspan="3">{{ tbLoanSituation.bankDeposit }}</td>
          <td width="150" class="title">银行还款卡号</td>
          <td colspan="7">{{ tbLoanSituation.bankNum }}</td>
        </tr>
        <tr>
          <td width="150" class="title">月还款金额</td>
          <td colspan="3">
            <span v-if="tbLoanSituation.monthMoney == null">0</span>
            <span v-else>{{ tbLoanSituation.monthMoney }}</span>
          </td>
          <td width="150" class="title">首期还款时间</td>
          <td colspan="3">{{ tbLoanSituation.firstPayTime }}</td>
          <td width="150" class="title">已还款期数</td>
          <td colspan="3">
            <span v-if="tbLoanSituation.alreadyPayNum == null">0</span>
            <span v-else>{{ tbLoanSituation.alreadyPayNum }}</span>
          </td>
        </tr>
        <tr>
          <td width="150" class="title">是否逾期</td>
          <td colspan="11">
            <template>
              <span v-if="tbLoanSituation.isOverdue == 0">无</span>
              <span v-if="tbLoanSituation.isOverdue == 1">有</span>
            </template>
          </td>
        </tr>
        <tr>
          <td width="150" class="title">逾期金额</td>
          <td colspan="3">
            <span v-if="tbLoanSituation.overdueMoney == null">0</span>
            <span v-else>{{ tbLoanSituation.overdueMoney }}</span>
          </td>
          <td width="150" class="title">逾期期数</td>
          <td colspan="3">
            <span v-if="tbLoanSituation.overdueNum == null">0</span>
            <span v-else>{{ tbLoanSituation.overdueNum }}</span>
          </td>
          <td width="150" class="title">更新时间</td>
          <td colspan="3">{{ tbLoanSituation.overdueUpdateTime }}</td>
        </tr>
        <tr>
          <td width="150" class="title">历史逾期及催收情况</td>
          <td colspan="11">{{ tbLoanSituation.historyOverdueSituation }}</td>
        </tr>
        <tr>
          <td width="150" class="title">有无代偿</td>
          <td colspan="11">
            <template>
              <span v-if="tbLoanSituation.isRepay == 0">无</span>
              <span v-if="tbLoanSituation.isRepay == 1">有</span>
            </template>
          </td>
        </tr>
        <tr v-for="(item, index) in repayInfoList" :key="index">
          <td width="150" class="title">第{{ numList[index] }}次代偿金额</td>
          <td colspan="2">
            <input
              type="text"
              class="inputClass"
              v-model="item.repayMoney"
              :readonly="readOnly"
              @dblclick="iptDbclick"
              @blur="blur(item)"
            />
          </td>
          <td width="150" class="title">代偿时间</td>

          <td colspan="2" @dblclick="iptDbclicks(index)">
            <template>
              <span v-if="item.statuse == 0">{{ item.repayTime }}</span>
              <el-date-picker
                v-if="item.statuse == 1"
                class="timeIndex"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="item.repayTime"
                type="datetime"
                @blur="blur(item)"
              >
              </el-date-picker>
            </template>
          </td>
          <td width="150" class="title">付款时间</td>

          <td colspan="2" @dblclick="iptDbclicksFk(index)">
            <template>
              <span v-if="item.fkTimeStatuse == 0">{{ item.repayPaymentTime }}</span>
              <el-date-picker
                v-if="item.fkTimeStatuse == 1"
                class="timeIndex"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="item.repayPaymentTime"
                type="datetime"
                @blur="blur(item)"
              >
              </el-date-picker>
            </template>
          </td>
          <td width="150" class="title">处理代偿时间</td>
          <td colspan="2" @dblclick="iptDbclicksKY(index)">
            <template>
              <span v-if="item.timestatus == 0">{{
                item.handleRepayTime
              }}</span>
              <el-date-picker
                v-if="item.timestatus == 1"
                class="timeIndex"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="item.handleRepayTime"
                type="datetime"
                @blur="blur(item)"
              >
              </el-date-picker>
            </template>
          </td>
        </tr>
        <tr>
          <td width="150">
            <el-button type="text" @click="addMoney"
              ><span class="icoStyle">+</span> 添加代偿金额</el-button
            >
          </td>
          <td colspan="11"></td>
        </tr>
        <tr>
          <td width="150" class="title titleIndex">贷后备注</td>
          <td colspan="11">
            {{ tbLoanSituation.loanRemark }}
          </td>
        </tr>
        <tr>
          <td width="150" class="title titleIndex">结清备注</td>
          <td colspan="11">
            {{ tbLoanSituation.settleRemark }}
          </td>
        </tr>
        <tr>
          <td width="150" class="title">担保函号</td>
          <td colspan="11">
            {{ tbLoanSituation.guaranteeLetterNum }}
          </td>
        </tr>
        <tr>
          <td width="150" class="title">他项权证档案号</td>
          <td colspan="11">
            {{ tbLoanSituation.warrantArchivesNum }}
          </td>
        </tr>
      </table>
    </div>
    <el-button @click="EditInfo" type="primary">编辑</el-button>

    <el-dialog
      title="编辑信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="150px">
          <el-col :span="12">
            <el-form-item label="放款时间:">
              <el-date-picker
                class="timeIndex"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="tbLoanSituation.loanTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <!-- <el-input v-model="tbLoanSituation.loanTime"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行还款开户行:">
              <el-input v-model="tbLoanSituation.bankDeposit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行还款卡号:">
              <el-input
                v-model="tbLoanSituation.bankNum"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="月还款金额:">
              <el-input
                v-model.number="tbLoanSituation.monthMoney"
                type="number"
                @input="clickData1($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首期还款时间:">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                class="timeIndex"
                v-model="tbLoanSituation.firstPayTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <!-- <el-input v-model="firstTime"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已还款期数:">
              <el-input
                v-model.number="tbLoanSituation.alreadyPayNum"
                type="number"
                @input="clickData($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否逾期:">
              <el-select
                class="timeIndex"
                v-model="tbLoanSituation.isOverdue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input v-model="tbLoanSituation.bankDeposit"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无代偿:">
              <el-select
                v-model="tbLoanSituation.isRepay"
                placeholder="请选择"
                class="timeIndex"
              >
                <el-option
                  v-for="item in loanCompensation"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input v-model="tbLoanSituation.bankDeposit"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期金额:">
              <el-input
                v-model.number="tbLoanSituation.overdueMoney"
                type="number"
                @input="clickData2($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期期数:" type="number">
              <el-input
                v-model.number="tbLoanSituation.overdueNum"
                @input="clickData3($event)"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="历史逾期及催收情况:">
              <el-input
                v-model="tbLoanSituation.historyOverdueSituation"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期更新时间:">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                class="timeIndex"
                v-model="tbLoanSituation.overdueUpdateTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="贷后备注:">
              <el-input
                v-model="tbLoanSituation.loanRemark"
                class="inputIndex"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="结清备注:">
              <el-input
                v-model="tbLoanSituation.settleRemark"
                class="inputIndex"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="担保函号:">
              <el-input
                      v-model="tbLoanSituation.guaranteeLetterNum"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="他项权证档案号:">
              <el-input
                      v-model="tbLoanSituation.warrantArchivesNum"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uplodInfo">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getLoanInfo,
  addLoan,
  // LoanAfter,
  ModifyRemark,
} from "../../assets/js/api";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      options: [
        { value: 0, label: "无" },
        { value: 1, label: "有" },
      ],
      loanCompensation: [
        { value: 0, label: "无" },
        { value: 1, label: "有" },
      ],
      dialogVisible: false, //弹窗开关!

      deductionsState: "", //扣款状态!
      firstTime: "", //首期还款时间!
      installmentSum: "", //分期总金额!
      openBank: "", //保理还款开户行!
      openBankNum: "", //保理还款卡号!
      reactiveState: "", //响应状态!
      refund: "", //分期月还款额!
      totalStages: "", //分期还款总期数!
      orderNumber: "",
      readOnly: true,
      repayInfoList: [], //代偿金额数组列表!
      numberData: [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
        "二十一",
        "二十二",
        "二十三",
        "二十四",
        "二十五",
        "二十六",
        "二十七",
        "二十八",
        "二十九",
        "三十",
      ],
      tbLoanSituation: {
        overdueMoney: 0,
        overdueNum: 0,
        monthMoney: 0,
        alreadyPayNum: 0,
      },
      tbLoanSituations: {},
      loanId: null,
      numList: [],

      tbRepayInfo: {
        handleRepayTime: "",
        id: null,
        loanId: 0,
        repayMoney: "",
        repayTime: "",
      },
    };
  },
  methods: {
    clickData(data) {
      if (data == "") {
        this.tbLoanSituation.alreadyPayNum = 0;
      }
    },
    clickData1(data) {
      if (data == "") {
        this.tbLoanSituation.monthMoney = 0;
      }
    },
    clickData2(data) {
      if (data == "") {
        this.tbLoanSituation.overdueMoney = 0;
      }
    },
    clickData3(data) {
      if (data == "") {
        this.tbLoanSituation.overdueNum = 0;
      }
    },
    // 代偿时间双击事件!
    iptDbclicks(index) {
      //手动设置repayInfoList数组里面索引为传入index的那个对象的statuse属性值为1!
      this.$set(this.repayInfoList[index], "statuse", 1);
    },
    // 付款时间双击事件!
    iptDbclicksFk(index) {
      //手动设置repayInfoList数组里面索引为传入index的那个对象的statuse属性值为1!
      this.$set(this.repayInfoList[index], "fkTimeStatuse", 1);
    },
    //处理代偿时间双击事件!
    iptDbclicksKY(index) {
      //手动设置repayInfoList数组里面索引为传入index的那个对象的statuse属性值为1!
      this.$set(this.repayInfoList[index], "timestatus", 1);
    },
    uplodInfo() {
      if (this.tbLoanSituation.overdueMoney == "") {
        this.tbLoanSituation.overdueMoney == null;
      }
      if (this.tbLoanSituation.overdueNum == "") {
        this.tbLoanSituation.overdueNum == null;
      }
      this.tbLoanSituation.orderNum = sessionStorage.getItem("orderNumber");
      ModifyRemark(this.tbLoanSituation).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.loanInfo();
          this.dialogVisible = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //弹出层监听按钮!
    handleClose() {
      this.dialogVisible = false;
      this.loanInfo();
    },
    // 编辑按钮!
    EditInfo() {
      // if (this.tbLoanSituation.overdueMoney == null) {
      //   this.tbLoanSituation.overdueMoney = 0;
      // }
      // if (this.tbLoanSituation.overdueNum == null) {
      //   this.tbLoanSituation.overdueNum = 0;
      // }
      // if (this.tbLoanSituation.monthMoney == null) {
      //   this.tbLoanSituation.monthMoney = 0;
      // }
      // if (this.tbLoanSituation.alreadyPayNum == null) {
      //   this.tbLoanSituation.alreadyPayNum = 0;
      // }
      this.dialogVisible = true; //打开弹窗!
    },
    // 修改贷后备注和结清备注!
    PostModifyRemark() {
      ModifyRemark(this.tbLoanSituation).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功!");
        } else {
          this.$message.error("修改失败");
        }
      });
    },

    blur(item) {
      if (item.id == null) {
        this.tbRepayInfo.loanId = this.loanId;
      } else {
        this.tbRepayInfo.loanId = item.loanId;
      }
      this.tbRepayInfo.handleRepayTime = item.handleRepayTime;
      this.tbRepayInfo.id = item.id;

      this.tbRepayInfo.repayMoney = item.repayMoney;
      this.tbRepayInfo.repayTime = item.repayTime;
      this.tbRepayInfo.repayPaymentTime = item.repayPaymentTime;
      this.readOnly = true;

      if (item.repayMoney != "") {
        addLoan(this.tbRepayInfo).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.tbRepayInfo.handleRepayTime = "";
            this.tbRepayInfo.id = null;
            this.tbRepayInfo.loanId = this.loanId;
            this.tbRepayInfo.repayMoney = "";
            this.tbRepayInfo.repayTime = "";
            this.tbRepayInfo.repayPaymentTime = "";
            this.loanInfo();
          } else {
            this.$message.error(res.message);
            this.tbRepayInfo.handleRepayTime = "";
            this.tbRepayInfo.id = null;
            this.tbRepayInfo.loanId = this.loanId;
            this.tbRepayInfo.repayMoney = "";
            this.tbRepayInfo.repayTime = "";
            this.tbRepayInfo.repayPaymentTime = "";
          }
        });
      } else {
        this.$message.error("请先完善信息");
      }

      // }
    },
    // getLoanAfter(){
    //   LoanAfter()
    // },
    //获取数据信息!
    loanInfo() {
      this.orderNumber = sessionStorage.getItem("orderNumber");
      getLoanInfo(this.orderNumber).then((res) => {
        this.deductionsState = res.data.deductionsState;

        this.firstTime = res.data.firstTime; //首期还款时间!
        this.installmentSum = res.data.installmentSum; //分期总金额!
        this.openBank = res.data.openBank; //保理还款卡号开户行!
        this.openBankNum = res.data.openBankNum; //保理还款卡号!
        this.reactiveState = res.data.reactiveState; //响应状态!
        this.refund = res.data.refund; //分期月还款额!
        this.totalStages = res.data.totalStages; //分期还款总期数!
        if (res.data.tbLoanSituation == null) {
          this.tbLoanSituation = {};
        } else {
          this.tbLoanSituation = res.data.tbLoanSituation;
          let numList = [];
          this.loanId = res.data.tbLoanSituation.id;

          for (var i = 1; i <= res.data.repayInfoList.length; i++) {
            let aaa = this.toChinesNum(i);

            numList.push(aaa);
          }
          this.numList = numList;
        }
        if (res.data.repayInfoList == null) {
          this.repayInfoList = [];
        } else {
          this.repayInfoList = res.data.repayInfoList.map((item) => {
            item.statuse = 0;
            item.fkTimeStatuse = 0;
            item.timestatus = 0;
            return item;
          });
        }

        // for (let i = 0; i < res.data.repayInfoList.length; i++) {
        //   res.data.repayInfoList[i].push({ status: 0 });

        // }

        // this.repayInfoLists=this.repayInfoList;

        // this.getLoanAfter(res.data.tbLoanSituation.id);
      });
    },
    // 数字转换大写的方法!
    toChinesNum(num) {
      //阿拉伯数字转中文数字
      let changeNum = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      let unit = ["", "十", "百", "千", "万"];
      num = parseInt(num);
      let getWan = (temp) => {
        let strArr = temp.toString().split("").reverse();
        let newNum = "";
        for (var i = 0; i < strArr.length; i++) {
          newNum =
            (i == 0 && strArr[i] == 0
              ? ""
              : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
              ? ""
              : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) +
            newNum;
        }
        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) {
        noWan = "0" + noWan;
      }
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    },
    iptDbclick() {
      this.readOnly = false;
    },
    // 添加代偿金额按钮!
    addMoney() {
      if (!this.loanId) {
        this.$message.error("请先编辑贷后信息!");
        return;
      }
      this.repayInfoList.push(this.tbRepayInfo);
    },
  },
  created() {
    this.loanInfo();
    // this.getLoanAfter();
  },
};
</script>
<style lang="less" scoped>
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}
.enterInfor table {
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}
.enterInfor table td {
  font-size: 14px;
  padding: 5px 0;
  padding-left: 10px;
  text-align: left;
  color: #333;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  padding: unset;
  text-align: center;
  color: rgba(51, 51, 51, 1);
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}

.enterInfor .titleIndex {
  height: 50px;
}
.icoStyle {
  font-weight: bold;
  display: inline-block;
  width: 10px;
  height: 10px;
  height: 13px;
  color: red;
  border: 1px solid red;
  border-radius: 15px;
  background-color: transparent;
}
/deep/ .inputClass {
  width: 97%;
  height: 30px;

  // outLine:red;
  margin-top: 0;
  margin-right: 20px;
  border: 0;
}
.inputClass1 {
  width: 97%;
  height: 80px;
  border: 0;
}

/deep/ .inputIndex {
  width: 360%;
}
/deep/ .timeIndex {
  width: 200px;
}
/deep/ .timeIndex1 {
  width: 100px;
}
</style>